/**
 * Created by Than on 24/01/2015.
 */
$(document).ready(function() {
    /**
     * Small Slider
     */
    smallSlider();

    $("#btn-show-book").click(function() {
        $style = $("#book-info").attr("style");
        if($style == "display: none;") {
            $("#book-info").attr("style", "display: block;");
        }
    });

    $('#btn-book-close').click(function () {
        $style = $("#book-info").attr("style");
        if($style == "display: block;") {
            document.getElementById("book").reset();
            $("#book-info").attr("style", "display: none;");
        }
    });

});

function smallSlider() {
    $imgSlider = $("div.small-slider ul#img-slider");
    $labelSlider = $("div.small-slider ul#label");
    $imgSlider.find('li#img1').attr('style', 'z-index: 2;');
    var slider = setInterval(function() {

        $imgSlider.children().each(function() {
            $(this).removeAttr('style');
        });

        $this = $imgSlider.find("li.active");
        if($this.attr("id") !== "img4") {
            $next = $this.next();
        }
        else {
            $next = $imgSlider.children().first();
        }

        $labelActive = $labelSlider.find('li.active');
        $labelNext = $labelSlider.find("label[for='" + $next.attr("id") + "']").parent();

        $this.attr("style", "z-index: 2;");
        $next.attr("style", "z-index: 1;");

        $this.animate({'left': '+258px'}, 'slow', function() {
            $this.attr('style', 'left: 0px;');
        });

        $this.removeClass();
        $labelActive.removeClass();
        $next.addClass('active');
        $labelNext.addClass('active');

    }, 3000);

    $('div.small-slider ul.label li label').click(function(e) {
        e.preventDefault();
        $imgSlider = $("div#small-slider ul#img-slider");
        $labelSlider = $("div#small-slider ul#label");

        $imgSlider.children().each(function() {
            $(this).removeAttr('style');
        });

        $thisImgActive = $imgSlider.find('li.active');
        $thisImgNext = $imgSlider.find('li#' + $(this).attr('for'));
        if($thisImgNext.attr('id') != $thisImgActive.attr('id')){
            $thisImgActive.attr('style', 'z-index: 2;');
            $thisImgNext.attr('style', 'z-index: 1;');


            $thisLabelActive = $labelSlider.find('li.active');
            $thisLabelNext = $(this).parent();


            $thisImgActive.animate({'left': '+258px'}, 'slow', function() {
                $thisImgActive.attr('style', 'left: 0px;');
            });

            setTimeout(function() {

            }, 3000);

            $thisImgActive.removeClass();
            $thisLabelActive.removeClass();
            $thisImgNext.addClass("active");
            $thisLabelNext.addClass('active');
        } else {
            $thisImgActive.attr('style', 'z-index: 2;');
        }
    });

}